<%- include('layout/header', { title: '微博 - 设置', isNav: true })%>

<div class="container margin-top-20">
  <div class="row">
    <!-- 左侧 -->
    <div class="col-8">
      <h5 class="margin-bottom-10">基本信息</h5>
      <form>
        <div class="form-group row">
          <label for="input-nick" class="col-sm-2 col-form-label">昵称</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input-nick" placeholder="请输入昵称" value="<%= nickName%>">
          </div>
        </div>
        <div class="form-group row">
          <label for="input-city" class="col-sm-2 col-form-label">城市</label>
          <div class="col-sm-10">
            <input type="text" class="form-control" id="input-city" placeholder="请输入城市" value="<%= city%>">
          </div>
        </div>
        <div class="form-group row">
          <label for="file-picture" class="col-sm-2 col-form-label">头像</label>
          <div class="col-sm-10">
            <img src="<%= picture%>" style="width: 100px;" class="margin-bottom-10" id="img-picture"/>
            <input type="file" class="form-control-file" accept="image/*" id="file-picture">
          </div>
        </div>
        <center><button type="submit" class="btn btn-primary" id="btn-submit-info">保存</button></center>
      </form>

      <hr/>
      <h5 class="margin-bottom-10">修改密码</h5>
      <form>
        <div class="form-group row">
          <label for="input-cur-password" class="col-sm-2 col-form-label">当前密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="input-cur-password" placeholder="请输入当前密码">
          </div>
        </div>
        <div class="form-group row">
          <label for="input-new-password" class="col-sm-2 col-form-label">新密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="input-new-password" placeholder="请输入新密码">
          </div>
        </div>
        <div class="form-group row">
          <label for="input-new-password-repeat" class="col-sm-2 col-form-label">确认密码</label>
          <div class="col-sm-10">
            <input type="password" class="form-control" id="input-new-password-repeat" placeholder="请输入确认密码">
          </div>
        </div>
        <center><button type="submit" class="btn btn-primary" id="btn-submit-password">提交</button></center>
      </form>

      <hr/>
      <center>
        <button class="btn btn-danger"  id="btn-logout">退出登录</button>
      </center>
    </div>

    <!-- 右侧 -->
    <div class="col-4">
    </div>
  </div>
</div>

<script>
$(function() {
  // 上传图片
  var $imgPicture = $('#img-picture')
  var $filePicture = $('#file-picture')
  $filePicture.change(function (e) {
    var file = $filePicture[0].files[0]
    ajax.upload('/api/utils/upload', file, function(err, data) {
      if (err) {
        alert(err)
        return
      }
      // 成功
      $imgPicture.attr('src', data.url)
    })
  })

  // 修改基本信息
  var $inputNick = $('#input-nick')
  var $inputCity = $('#input-city')
  $('#btn-submit-info').click(function(e) {
    e.preventDefault()
    var nickName = $inputNick.val()
    var city = $inputCity.val()
    var picture = $imgPicture.attr('src')

    ajax.patch('/api/user/changeInfo', {
      nickName,
      city,
      picture
    }, function(err, data) {
      if (err) {
        alert(err)
        return
      }
      alert('修改成功')
    })
  })

  // 修改密码
  var $inputCurPassword = $('#input-cur-password')
  var $inputNewPassword = $('#input-new-password')
  var $inputNewPasswordRepeat = $('#input-new-password-repeat')
  $('#btn-submit-password').click(function(e) {
    e.preventDefault()
    var curPassword = $inputCurPassword.val()
    var newPassword = $inputNewPassword.val()
    var newPasswordRepeat = $inputNewPasswordRepeat.val()

    if (newPassword !== newPasswordRepeat) {
      alert('两次新密码输入不一致')
      return
    }
    if (curPassword === newPassword) {
      alert('新密码和当前密码一致')
      return
    }
      
    ajax.patch('/api/user/changePassword', {
      password: curPassword,
      newPassword: newPassword
    }, function(err, data) {
      if (err) {
        alert(err)
        return
      }
      alert('修改成功')
      $inputCurPassword.val('')
      $inputNewPassword.val('')
      $inputNewPasswordRepeat.val('')
    })
  })

  // 退出登录
  $('#btn-logout').click(function() {
    if (confirm('是否确定退出登录？') === false) {
      return
    }
    ajax.post('/api/user/logout', function(err, data) {
      if (err) {
        console.error(err)
        return
      }
      alert('已成功退出')
      location.href = '/login'
    })
  })
})
</script>

<%- include('layout/footer')%>
